<template>
  <el-row class="header-hint" type="flex" align="middle">
    <div class="hint-item" v-if="download">
      <el-button type="text" icon="edu-icon-xiazai edu-icon--left">下载</el-button>
    </div>
    <div class="hint-item">
      <el-button type="text" icon="edu-icon-shoucang edu-icon--left">收藏</el-button>
    </div>
    <div class="hint-item">
      <el-popover placement="bottom" trigger="hover">
        <div>分享</div>
        <el-button type="text" slot="reference" icon="edu-icon-fenxiang edu-icon--left"
          >分享</el-button
        >
      </el-popover>
    </div>
    <div class="hint-item">
      <el-popover placement="bottom" trigger="hover">
        <div>扫码查看</div>
        <el-button type="text" slot="reference" icon="edu-icon-saoma edu-icon--left"
          >扫码查看</el-button
        >
      </el-popover>
    </div>
    <div class="hint-item">
      <el-button type="text" icon="el-icon-service">客服</el-button>
    </div>
  </el-row>
</template>

<script>
export default {
  props: {
    download: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss" scoped>
.header-hint {
  ::v-deep .el-button {
    padding: 0;
  }
  .hint-item + .hint-item {
    margin-left: 20px;
  }
}
</style>
